<template>
	<view class="knowledge-points-card">
		<view class="card-header">
			<text class="card-title">知识点掌握情况</text>
			<view class="info-icon">ⓘ</view>
		</view>
		
		<!-- 掌握程度统计 -->
		<view class="mastery-stats">
			<view class="stat-item good">
				<text class="stat-label">掌握较好</text>
				<text class="stat-number">{{ knowledgeData.good }}</text>
			</view>
			<view class="stat-item average">
				<text class="stat-label">掌握一般</text>
				<text class="stat-number">{{ knowledgeData.average }}</text>
			</view>
			<view class="stat-item poor">
				<text class="stat-label">掌握不好</text>
				<text class="stat-number">{{ knowledgeData.poor }}</text>
			</view>
		</view>
		
		<!-- 具体知识点列表 -->
		<view class="knowledge-list">
			<view class="knowledge-item" v-for="item in knowledgeData.points" :key="item.name">
				<text class="knowledge-name">{{ item.name }}</text>
				<view class="knowledge-stats">
					<view class="stat-group">
						<text class="stat-title">年级得分率</text>
						<text class="stat-value">{{ item.gradeRate }}</text>
					</view>
					<view class="stat-group">
						<text class="stat-title">班级得分率</text>
						<text class="stat-value">{{ item.classRate }}</text>
					</view>
					<view class="stat-group">
						<text class="stat-title">题目</text>
						<text class="stat-value">{{ item.questions }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'KnowledgePoints',
	props: {
		knowledgeData: {
			type: Object,
			default: () => ({
				good: 20,
				average: 50,
				poor: 400,
				points: [
					{
						name: '补全对话',
						gradeRate: '46%',
						classRate: '67%',
						questions: '28、29'
					},
					{
						name: '不定代词',
						gradeRate: '46%',
						classRate: '67%',
						questions: '28、29'
					}
				]
			})
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@white: #fff;
@border-color: #f0f0f0;

.knowledge-points-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		.card-title {
			font-size: 28rpx;
			font-weight: bold;
			color: @text-color;
		}

		.info-icon {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			background: #e0e0e0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			color: @text-light;
		}
	}

	// 掌握程度统计
	.mastery-stats {
		display: flex;
		gap: 16rpx;
		margin-bottom: 32rpx;

		.stat-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 16rpx 12rpx;
			border-radius: 12rpx;
			gap: 6rpx;

			&.good {
				background: #E8F5E8;

				.stat-label {
					color: #4CAF50;
				}
			}

			&.average {
				background: #E3F2FD;

				.stat-label {
					color: #2196F3;
				}
			}

			&.poor {
				background: #FFF3E0;

				.stat-label {
					color: #FF9800;
				}
			}

			.stat-label {
				font-size: 20rpx;
				font-weight: 500;
				line-height: 1.2;
			}

			.stat-number {
				font-size: 40rpx;
				font-weight: bold;
				color: @text-color;
				line-height: 1;
			}
		}
	}

	// 知识点列表
	.knowledge-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.knowledge-item {
			padding: 24rpx 20rpx;
			background: #f8f9fa;
			border-radius: 12rpx;

			.knowledge-name {
				font-size: 28rpx;
				font-weight: 600;
				color: @text-color;
				margin-bottom: 20rpx;
				display: block;
			}

			.knowledge-stats {
				display: flex;
				align-items: flex-end;
				gap: 40rpx;

				.stat-group {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 8rpx;

					&:first-child {
						align-items: flex-start;
						flex: 1;
					}

					.stat-title {
						font-size: 20rpx;
						color: @text-light;
						line-height: 1.2;
						margin-bottom: 4rpx;
					}

					.stat-value {
						font-size: 32rpx;
						font-weight: bold;
						color: @text-color;
						line-height: 1;
					}
				}
			}
		}
	}
}
</style>
